<template>
    <div id='activityManage'>
        <div class="topi">
             <el-date-picker
                v-model="searchdate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <el-input placeholder="主题、发布人" v-model="searchinput">
                <el-button slot="append" @click="getTableData(1)" icon="el-icon-search"></el-button>
            </el-input>
            <el-button @click="addActivity" type='primary'>添加活动</el-button>
        </div>
         <el-table :data="tableData" border  style="width: 100%">
            <el-table-column v-for="col in tableCols" :key="col.id"  :prop="col.prop"
            :label="col.label">
            </el-table-column>
            <el-table-column  label="操作"  align="center" width="172">
                <template slot-scope="scope">
                  <el-button type="text" size="normally" :disabled='scope.row.state == 1 ? true : false'   @click="editAdmin(scope.row)">{{scope.row.state == 1 ? '已冻结' : '冻结'}}</el-button>
                  <el-button type="text" size="normally" v-if="scope.row.state == 1" @click="jd(scope.row)">解冻</el-button>
                  <el-button type="text" size="normally"  @click="view(scope.row)">查看</el-button>
                </template>
              </el-table-column>
        </el-table>
        <el-pagination class="pageinfo" background layout="total, prev, pager, next" :page-size='limit'
          :current-page='currentPage'
          @current-change='changeCurrentPage'
          :total="totals">
        </el-pagination>
    </div>
 
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        tableCols: [
            {id: 1, prop: 'id', label: 'id'}, {id: 2, prop: 'sponsor', label: '发布人'}, {id: 3, prop: 'title', label: '主题'},
            {id: 4, prop: 'createTime', label: '发布时间'}, {id: 5, prop: 'endDate', label: '结束时间'}
           
        ],
        searchinput: '',
        searchdate: '',
        currentPage: 1,
        totals: 0,
        limit: 10
      }
    },
    mounted() {
      this.getTableData()
    },
    methods: {
        jd (row) {
          console.log(row)
          this.$api.unfreezeEvent({id: row.id}, res => {
                            this.$message({
                                type: 'success',
                                message: '解冻成功'
                            })
                            this.getTableData()
                        })
        },
        changeCurrentPage(page) {
          
          this.currentPage = page
          this.getTableData()
        },
        addActivity() {
          this.$router.push({path: 'addActivity', query: {mode: 'add'}})
        },
        getTableData(arg) {
          if (arg) {
            this.currentPage = arg;
          }
          if(this.searchdate == null) {
              this.searchdate = []
          }
          let startdate, enddate;
          if(this.searchdate[0] != undefined) {
              startdate = this.$moment(this.searchdate[0]).format('YYYY/MM/DD')
          } else {
            startdate = this.searchdate[0]
          }
          if(this.searchdate[1] != undefined) {
              enddate = this.$moment(this.searchdate[1]).format('YYYY/MM/DD')
          } else {
            enddate = this.searchdate[1]
          }
          let param = {
            startDate: startdate,
            endDate: enddate,
            name: this.searchinput,
            page: this.currentPage,
            limit: this.limit
          }
          this.$api.apiGetActivityList(param, res => {
              this.tableData = res.data
              this.totals = res.pageInfo.total
          })
        },
        editAdmin(row) {
               this.$confirm('确认要冻结此活动吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                        let param = {
                            id: row.id
                        }
                        this.$api.apiDelActivity(param, res => {
                            this.$message({
                                type: 'success',
                                message: '冻结成功'
                            })
                            this.getTableData()
                        })
                  })     
        },
        view(row) {
            this.$router.push({path: 'viewActivity', query: {id: row.id, state: row.state}})
        }
    }
  }
</script>
<style lang="scss">
#activityManage {
  .topi {
        display: flex;
        width: 80%;
        margin-bottom: 20px;
        .el-input {
            width: 40%;
            margin-left: 30px;
            margin-right: 100px
        }
    }
}
    
</style>
